@basefont: 37.5;
@media screen and (min-width: 750px) {
    html {
        font-size: 37.5px !important;
    }
}
html{
    font-size: 50px;
}
body{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    // height: 2000px;;
    
}
header {
    position: relative;
    width: (750rem / @basefont);
    height: (129rem / @basefont);
    padding-top: (70rem / @basefont);
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    h1{
        width: 100%;
        height: (33rem / @basefont);
        line-height: (33rem / @basefont);
        text-align: center;
        font-size: (35rem / @basefont);
        font-weight: 400;
        margin: 0;
    }
    .top_right {
        position: absolute;
        top: (50rem / @basefont);
        right: (17rem / @basefont);
        width: (172rem / @basefont);
        height: (62rem / @basefont);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.banner {
    ul{
        display: flex;
        flex-wrap:wrap;
        li{
            flex: 33%;
            margin-top: (44rem / @basefont);
            a{
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: (25rem / @basefont);
                color: #707070;
                img{
                    width: (139rem / @basefont);
                    height: (139rem / @basefont);
                }
            }
        }
    }
    .block_img{
        width: (722rem / @basefont);
        height: (152rem / @basefont);
        margin-top: (70rem / @basefont);
        margin-left: (18rem / @basefont);
        margin-bottom: (43rem / @basefont);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.inter{
    width: (750rem / @basefont);
    height: (10rem / @basefont);
    background-color: #f2f4f7;
}
.course_1 {
    .course_head{
        position: relative;
        height: (113rem / @basefont);
        line-height: (113rem / @basefont);
        h4{
            position: relative;
            font-size: (28rem / @basefont);
            padding-left: (78rem / @basefont);
            &:before{
                position: absolute;
                top: (40rem / @basefont);
                left: (22rem / @basefont);
                display: inline-block;
                width: (38rem / @basefont);
                height: (38rem / @basefont);
                content:"";
                background: url(../images/新手指导.png) no-repeat;
                background-size: (38rem / @basefont) (38rem / @basefont);
            }
        }
        .more{
            position: absolute;
            top: 0.066667rem;
            right: (25rem / @basefont);
            font-size: (21rem / @basefont);
            color: #999;
        }
        
    }
    .get_job_ifo{
        margin-top: .2rem;
        position: relative;
        --swiper-navigation-color: #666;/* 单独设置按钮颜色 */
        --swiper-navigation-size: 20px;/* 设置按钮大小 */
        .swiper-container {
            width: 14.4rem;
            height: 100%;
          }
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            transform: scale(0.8);
            opacity: 0.6;
            a{
                img{
                    width: 8.0rem;
                    height: 8.4rem;
                }
                p{
                   margin-top: .4rem;
                    font-size: 14px;
                    color: #333;
                }
            }
          }
          .swiper-slide-active,.swiper-slide-duplicate-active{
            transform: scale(1);
            z-index: 999;
            opacity: 1;
          }
    }
}
.course_2 {
    .course_head{
        position: relative;
        height: (113rem / @basefont);
        line-height: (113rem / @basefont);
        h4{
            position: relative;
            font-size: (28rem / @basefont);
            padding-left: (78rem / @basefont);
            &:before{
                position: absolute;
                top: (40rem / @basefont);
                left: (22rem / @basefont);
                display: inline-block;
                width: (38rem / @basefont);
                height: (38rem / @basefont);
                content:"";
                background: url(../images/充电保.png) no-repeat;
                background-size: (38rem / @basefont) (38rem / @basefont);
            }
        }
        .more{
            position: absolute;
            top: 0.066667rem;
            right: (25rem / @basefont);
            font-size: (21rem / @basefont);
            color: #999;
        }
    }
    .get_study_ifo{
        margin-left: .32rem;
        overflow: hidden;
        .swiper {
            width: 100%;
            height: 100%;
          }
    
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background-color: #fff;
            width: 7.7333rem;
            height: 9.0667rem;
            padding: .1867rem;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            box-sizing: border-box;
            border-radius: .2133rem;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            img{
                display: block;
                width: 100%;
            }
            .txt_top{
                margin: .2667rem auto;
                font-size: 14px;
                text-align: left;
                height: 1.6rem;
                line-height: 1.3;
                color: #333;
                letter-spacing: .0533rem;               
            }
            .txt_foot{
                margin: .2667rem auto;
                width: 100%;
                font-size: 12px;
                color: #999;
                text-align: left;
                height: .5867rem;
                line-height: 1;
                i{
                    font-style: normal;
                    color: red;
                    font-size: 12px;
                }
            }
          }
    
          
    }
    .inter{
        height: 3.4667rem;
        background-color: #fff;
    } 
}
footer {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e2e2e2;
    margin-top: 2.6667rem;
    width: (750rem / @basefont);
    height: (113rem / @basefont);
    background-color: #fff;
    z-index: 999;
    ul{
        display: flex;
        li{
            flex: 1;
            a{
                display: flex;
                height: (113rem / @basefont);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: (21rem / @basefont);
                color: #7f7f7f;
                img{
                    width: (40rem / @basefont);
                    height: (40rem / @basefont);
                }
                .blue {
                    color: #2ccac7;
                }
                span{
                    margin-top: (12rem / @basefont);
                }
            }
        }
    }
}